<!DOCTYPE html>
<html lang="zh-CN" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 使用 emoji 作为 favicon -->
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text y='16' font-size='16'>🎮</text></svg>">
    <title>{% block title %}像素工坊{% endblock %}</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <!-- 内联关键 CSS -->
    <style>
        @font-face {
            font-display: block;
            font-family: bootstrap-icons;
            src: url("{{ url_for('static', filename='fonts/bootstrap-icons.woff2') }}") format("woff2"),
                 url("{{ url_for('static', filename='fonts/bootstrap-icons.woff') }}") format("woff");
        }
        /* Bootstrap Icons 基础样式 */
        .bi::before,
        [class^="bi-"]::before,
        [class*=" bi-"]::before {
            display: inline-block;
            font-family: bootstrap-icons !important;
            font-style: normal;
            font-weight: normal !important;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            vertical-align: -0.125em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        /* 图标代码 */
        .bi-person-fill::before { content: "\f4dd"; }
        .bi-tree-fill::before { content: "\f606"; }
        .bi-box-fill::before { content: "\f1c3"; }
        .bi-house-fill::before { content: "\f361"; }
        .bi-shield-fill::before { content: "\f550"; }
        .bi-droplet-fill::before { content: "\f268"; }
        .bi-moon-stars-fill::before { content: "\f4b4"; }
        .bi-sun-fill::before { content: "\f5a2"; }

        :root {
            --primary-color: #7C3AED;
            --secondary-color: #4F46E5;
            --background-dark: #1F2937;
            --background-light: #F9FAFB;
            --text-dark: #111827;
            --text-light: #F9FAFB;
        }
        body { 
            font-family: system-ui, -apple-system, sans-serif;
            transition: background-color 0.3s ease;
        }
        /* 导航栏样式 */
        .nav-link {
            transition: all 0.2s ease;
            border-radius: 0.5rem;
            padding: 0.5rem 1rem;
        }
        .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        .nav-link i {
            margin-right: 0.5rem;
        }
        /* 主题切换按钮 */
        #themeToggle {
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        #themeToggle:hover {
            transform: rotate(15deg);
        }
        /* 卡片样式 */
        .card {
            border: none;
            border-radius: 1rem;
            transition: transform 0.2s ease;
        }
        .card:hover {
            transform: translateY(-5px);
        }
        /* 按钮样式 */
        .btn-primary {
            background-color: var(--primary-color);
            border: none;
            border-radius: 0.5rem;
            padding: 0.75rem 1.5rem;
            transition: all 0.2s ease;
        }
        .btn-primary:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
        }
    </style>
    <!-- 异步加载非关键 CSS -->
    <link rel="preload" href="{{ url_for('static', filename='css/style.css') }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark px-3">
        <div class="container-fluid">
            <a class="navbar-brand d-flex align-items-center" href="{{ url_for('main.index') }}">
                <div class="brand-logo me-2" style="width: 32px; height: 32px; background-color: var(--primary-color); border-radius: 6px; display: flex; align-items: center; justify-content: center;">
                    <span style="color: white; font-weight: bold; font-size: 18px;">P</span>
                </div>
                像素工坊
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('main.character') }}">
                            <i class="bi bi-person-fill"></i> 角色
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('main.plant') }}">
                            <i class="bi bi-tree-fill"></i> 植物
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('main.material') }}">
                            <i class="bi bi-box-fill"></i> 材料
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('main.building') }}">
                            <i class="bi bi-house-fill"></i> 建筑
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('main.weapon') }}">
                            <i class="bi bi-shield-fill"></i> 武器
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('main.potion') }}">
                            <i class="bi bi-droplet-fill"></i> 药品
                        </a>
                    </li>
                </ul>
                <div class="ms-auto">
                    <button class="btn btn-outline-light rounded-circle p-2" id="themeToggle" title="切换主题">
                        <i class="bi bi-moon-stars-fill"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <main class="container py-4">
        {% block content %}{% endblock %}
    </main>

    <!-- 使用本地 Bootstrap JS -->
    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}" defer></script>
    <script src="{{ url_for('static', filename='js/main.js') }}" defer></script>
    {% block scripts %}{% endblock %}
</body>
</html> 